<script setup lang="ts">

let alignContent = ref<string>('stretch')
let flexDirection = ref<string>('row')
let blockSizeBoolean = ref<boolean>(true)
let blockSize = computed(() => {
  return blockSizeBoolean.value ? "88px" : "initial"
})
</script>

<template>
<div class="wrap">
  <div class="form">
    <div class="control">
      <label for="flex-direction">flex-direction:</label>
      <select v-model="flexDirection" name="flex-direction" id="flex-direction">
        <option value="row">row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>
    </div>
    <div class="control">
      <label for="align-content">align-content:</label>
      <select v-model="alignContent" name="align-content" id="align-content">
        <option value="stretch">stretch</option>
        <option value="flex-start">flex-start</option>
        <option value="center">center</option>
        <option value="flex-end">flex-end</option>
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="space-around">space-around</option>
        <option value="space-between">space-between</option>
        <option value="space-evenly">sapce-evenly</option>
        <option value="inherit">inherit</option>
        <option value="initial">initial</option>
        <option value="revert">revert</option>
        <option value="unset">unset</option>
      </select>
    </div>
    <div class="control">
      <label class="toggle" for="flexItem">
        <span class="toggle__label">切换Flex项目尺寸：88px x 88px</span>
        <input v-model="blockSizeBoolean" type="checkbox" role="switch" class="toggle__element" id="flexItem" checked />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
    </div>
  </div>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</div>
</template>

<style scoped lang="scss">
  .wrap {
    --size: v-bind(blockSize);
    --flex-direction: v-bind(flexDirection);
    --align-content: v-bind(alignContent);
    --color-primary: #3740ff;
    --color-primary-dark: #272eb5;
    --color-primary-light: #3740ff;
    --color-primary-x-light: #e8f0fe;
    --color-light: #ffffff;
    --color-dark: #202124;
    --color-off-white: #f3f4f4;
    --color-mid: #5f6368;
    --color-mid-dark: #3c4043;
    --color-stroke: #dadce0;
    --metric-gutter: 1.5rem;
    --metric-box-spacing: 1rem;
    --metric-radius: 3px;
    --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
    0px 2px 6px 2px rgba(60, 64, 67, 0.15);
    --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", Arial, sans-serif;
    background-color: #557;
    color: #fff;
    display: grid;
    grid-template-rows: min-content 1fr;
    gap: 1rem;
    align-content: start;
    justify-content: center;
    justify-items: center;
    padding: 1rem;

    .form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;

      .control {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      label {
        white-space: nowrap;
        text-align: right;
      }
      select {
        padding: 0.25em 0.5em;
        font-size: inherit;
        min-width: 160px;
      }
      .toggle {
        --metric-toggle-thumb-size: 1rem;
        --metric-toggle-thumb-space: 0.25rem;
        position: relative;
        display: inline-flex;
        align-items: center;

        &::after {
          content: "\A";
          white-space: pre;
        }

        .toggle__element {
          opacity: 0;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: var(--metric-toggle-thumb-size);
          width: 1em;
          height: 1em;
          &:checked + .toggle__decor {
            background: var(--color-primary-light);
            .toggle__thumb {
              transform: translateX(var(--metric-toggle-thumb-size)) rotate(270deg);
            }
          }
        }

        .toggle__decor {
          display: block;
          position: relative;
          overflow: hidden;
          width: calc(
              (var(--metric-toggle-thumb-size) * 2) +
              (var(--metric-toggle-thumb-space) * 2)
          );
          height: calc(
              var(--metric-toggle-thumb-size) + (var(--metric-toggle-thumb-space) * 2)
          );
          background: var(--color-mid);
          margin-left: 0.5rem;
          border-radius: var(--metric-toggle-thumb-size);
          box-sizing: content-box;
          border: 1px solid var(--color-light);

          .toggle__thumb {
            display: grid;
            place-items: center;
            width: var(--metric-toggle-thumb-size);
            height: var(--metric-toggle-thumb-size);
            border-radius: var(--metric-toggle-thumb-size);
            background: linear-gradient(
                    229.84deg,
                    rgba(255, 255, 255, 0) 14.29%,
                    rgba(48, 48, 48, 0.15) 81.82%
            ),
            #ffffff;
            box-shadow: var(--generic-shadow);
            position: absolute;
            top: var(--metric-toggle-thumb-space);
            left: var(--metric-toggle-thumb-space);
            transform: none;
            transition: transform 200ms cubic-bezier(1, 0, 0.55, 0.85);
            // 告知浏览器该元素会有哪些变化方法，浏览器提前做好优化准备工作，使页面的反应更为快速灵敏
            will-change: transform;
            z-index: 1;
            &::before {
              content: "";
              display: none;
              width: calc(
                  var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
              );
              height: calc(
                  var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
              );
              border: 1px solid var(--color-primary-light);
              border-radius: calc(
                  var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
              );
            }
          }
        }
      }
    }

    .container {
      inline-size: 600px;
      block-size: 300px;
      display: flex;
      flex-wrap: wrap;
      background: #ffffff;
      border: 3px solid #88978a;
      border-radius: 7px;
      align-content: var(--align-content);
      flex-direction: var(--flex-direction);

      .item {
        background: #e8f0fe;
        border: 2px solid #2938e9;
        border-radius: 4px;
        color: #000;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-wrap: wrap;

        block-size: var(--size);
        inline-size: var(--size);

        &:nth-child(2) {
          background-color: #efe1ff;
        }
        &:nth-child(3) {
          background-color: #bbd7af;
        }
        &:nth-child(4) {
          background-color: #ecbbbb;
        }
        &:nth-child(5) {
          background-color: #00f0ff;
        }
        &:nth-child(6) {
          background-color: #d7af0a;
        }
      }
    }
  }
</style>
